<template>
  <view class="identity-page">
    <!-- 导航栏 -->
    <up-navbar :title="useT('身份认证')" :safeAreaInsetTop="true" :autoBack="true" leftIconColor="#333" titleColor="#333" bgColor="#fff" placeholder></up-navbar>

    <!-- 主要内容 -->
    <view class="content">
      <!-- 标题 -->
      <view class="title">{{ useT('请完成身份认证') }}</view>

      <!-- 说明文字 -->
      <view class="description">{{ useT('根据当地法律法规，您需要完成身份认证以使用我们的服务。这有助于保护您的账户安全，并且允许您使用所有NEXA服务和功能。') }}</view>

      <!-- 认证图标 -->
      <view class="verification-icon">
        <image src="/static/mine/identity.png" class="identity-image" mode="aspectFit"></image>
      </view>

      <!-- 需要提供的内容 -->
      <view v-if="verifyStatus == 0" class="requirements">
        <view class="requirements-title">{{ useT('您需要提供') }}</view>
        <view class="requirements-list">
          <view class="requirement-item">
            <view class="requirement-number">1</view>
            <view class="requirement-text">{{ useT('证件识别认证') }}</view>
          </view>
          <view class="requirement-item">
            <view class="requirement-number">2</view>
            <view class="requirement-text">{{ useT('个人信息') }}</view>
          </view>
        </view>
      </view>
      <view v-if="verifyStatus > 0">
        <!-- 加载状态 -->
        <view v-if="loading" class="loading-container">
          <up-loading-icon mode="circle" color="#12C284"></up-loading-icon>
          <view class="loading-text">{{ useT('加载中.') }}</view>
        </view>

        <!-- 状态显示 -->
        <view v-else class="status-container">
          <view class="status-badge" :class="getStatusClass(verifyStatus)">
            {{ getStatusText(verifyStatus) }}
          </view>
        </view>
        <view v-if="verifyStatus == 3" class="status-text">{{ userStore.userInfo.id_verify_remark }}</view>
      </view>
    </view>

    <!-- 免责声明 -->
    <view class="disclaimer">{{ useT('您提供的信息以及资料仅用于身份认证') }}</view>

    <!-- 认证按钮 -->
    <view class="verify-button" :class="getStatusClass(verifyStatus)" @click="startVerification">
      <text v-if="verifyStatus === 0">{{ useT('立即认证') }}</text>
      <text v-else-if="verifyStatus === 1">{{ useT('认证审核中') }}</text>
      <text v-else-if="verifyStatus === 2">{{ useT('已完成认证') }}</text>
      <text v-else-if="verifyStatus === 3">{{ useT('重新认证') }}</text>
    </view>
  </view>
</template>

<script setup>
import { updateUserInfo } from '@/api/user.js';
import { useUserStore } from '@/stores';
import { useT } from '@/utils/i18n.js';
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';

const userStore = useUserStore();

// 验证状态
const verifyStatus = ref(0); // 0未验证 1验证中 2已验证 3验证失败
const loading = ref(false);

// 获取验证状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: useT('未验证'),
    1: useT('验证中'),
    2: useT('已验证'),
    3: useT('验证失败')
  };
  return statusMap[status] || useT('未知状态');
};

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    0: 'status-unverified',
    1: 'status-verifying',
    2: 'status-verified',
    3: 'status-failed'
  };
  return classMap[status] || 'status-unverified';
};

// 页面显示时获取用户信息
onShow(async () => {
  await loadUserInfo();
});

// 加载用户信息
const loadUserInfo = async () => {
  try {
    loading.value = true;
    const userInfo = await updateUserInfo();
    if (userInfo && userInfo.id_verify_status !== undefined) {
      verifyStatus.value = userInfo.id_verify_status;
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
    uni.showToast({
      title: useT('获取用户信息失败'),
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};

// 开始认证
const startVerification = () => {
  if (verifyStatus.value === 1) {
    uni.showToast({
      title: useT('认证审核中，请耐心等待'),
      icon: 'none'
    });
    return;
  }

  if (verifyStatus.value === 2) {
    uni.showToast({
      title: useT('您已完成身份认证'),
      icon: 'none'
    });
    return;
  }

  uni.navigateTo({
    url: '/pagesA/identity/verification'
  });
};
</script>

<style lang="scss" scoped>
.identity-page {
  min-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  padding: 60rpx 40rpx 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 48rpx;
  font-weight: 700;
  color: #333;
  text-align: center;
  margin-bottom: 40rpx;
}

.description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 80rpx;
  padding: 0 20rpx;
}

.verification-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80rpx;

  .identity-image {
    width: 300rpx;
    height: 300rpx;
  }
}

.requirements {
  width: 100%;
  margin-bottom: 40rpx;

  .requirements-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 30rpx;
    text-align: center;
  }

  .requirements-list {
    .requirement-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .requirement-number {
        width: 40rpx;
        height: 40rpx;
        background-color: #12c284;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        font-weight: 600;
        margin-right: 20rpx;
      }

      .requirement-text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}

// 加载状态样式
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;

  .loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #666;
  }
}

// 状态显示样式
.status-container {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;

  .status-badge {
    padding: 12rpx 24rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    font-weight: 500;

    &.status-unverified {
      background-color: #f0f9f5;
      color: #12c284;
      border: 2rpx solid #12c284;
    }

    &.status-verifying {
      background-color: #fff4e6;
      color: #ff9500;
      border: 2rpx solid #ff9500;
    }

    &.status-verified {
      background-color: #e8f5e8;
      color: #34c759;
      border: 2rpx solid #34c759;
    }

    &.status-failed {
      background-color: #ffebeb;
      color: #ff3b30;
      border: 2rpx solid #ff3b30;
    }
  }
}

.disclaimer {
  position: fixed;
  bottom: 140rpx;
  left: 40rpx;
  right: 40rpx;
  font-size: 24rpx;
  color: #999;
  text-align: center;
  line-height: 1.5;
}

.verify-button {
  position: fixed;
  bottom: 40rpx;
  left: 40rpx;
  right: 40rpx;
  height: 88rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 44rpx;
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2rpx);
  }

  // 未验证状态
  &.status-unverified {
    background: linear-gradient(135deg, #12c284, #0fa870);
    box-shadow: 0 8rpx 24rpx rgba(18, 194, 132, 0.3);

    &:active {
      box-shadow: 0 4rpx 12rpx rgba(18, 194, 132, 0.4);
    }
  }

  // 验证中状态
  &.status-verifying {
    background: linear-gradient(135deg, #ff9500, #ff7a00);
    box-shadow: 0 8rpx 24rpx rgba(255, 149, 0, 0.3);

    &:active {
      box-shadow: 0 4rpx 12rpx rgba(255, 149, 0, 0.4);
    }
  }

  // 已验证状态
  &.status-verified {
    background: linear-gradient(135deg, #34c759, #30b04a);
    box-shadow: 0 8rpx 24rpx rgba(52, 199, 89, 0.3);

    &:active {
      box-shadow: 0 4rpx 12rpx rgba(52, 199, 89, 0.4);
    }
  }

  // 验证失败状态
  &.status-failed {
    background: linear-gradient(135deg, #ff3b30, #e6342a);
    box-shadow: 0 8rpx 24rpx rgba(255, 59, 48, 0.3);

    &:active {
      box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.4);
    }
  }
}
.status-text {
  font-size: 28rpx;
  color: #ff0000;
  text-align: center;
  margin-top: 20rpx;
}
</style>
